<!-- 首页 -->
<template>
	<view class="home-box">
		<!-- <view :style="{ height: CustomBar + 'px', width: '750rpx' }"></view> -->
		<view class="home-imgbox mt10" :style="{ transform: `translateY(${CustomBar}px)` }">
			<image src="../../static/image/home/homeBg.jpg" mode="scaleToFill" style="width: 100%; height: 100%" />

			<view class="location" @click="turnToCity">
				<!-- <u-icon name="map-fill" color="#fff" size="33"></u-icon> -->
				<i class="iconfont icon-dingwei" :style="{ color: !isMock ? '#0085ff' : 'yellow' }"></i>
				<text class="ml10 fs30">{{ localName }}</text>
				<text class="ml10 fs20" v-show="isMock">(不在当前位置)</text>
			</view>

			<view class="img-bot">
				<view class="bot-title">
					<view class="left-title">{{ pageData.cnCalendarDetail }}</view>
					<!-- <view class="right-icon flex-cc">
						<u-icon name="mic"></u-icon>
					</view> -->
				</view>

				<view class="bot-panel">
					<view class="l-panel">
						<view class="l-tem fs45">{{ pageData.temperature | meteoValue }}℃</view>
						<image src="../../static/image/home/line.png" mode="widthFix" style="width: 414rpx" />

						<view class="l-item-box">
							<view class="item-sin">
								<text class="f1">湿度</text>
								<text style="" class="f2 ml10 fs30">{{ pageData.humidity | meteoValue }} </text>
								<text class="fs26 f2"> %</text>
							</view>
							<view class="item-sin">
								<text class="f1">本时次雨量</text>
								<text style="" class="f2 ml10 fs30">{{ pageData.hourRain | meteoValue }}</text>
								<text class="fs26 f2">mm</text>
							</view>
							<view class="item-sin">
								<text class="f1">风速</text>
								<text style="" class="f2 ml10 fs30">{{ pageData.windSpeed | meteoValue }}</text>
								<text class="fs26 f2">m/s</text>
							</view>
							<view class="item-sin" style="width: 190rpx">
								<text class="f1">能见度</text>
								<text style="" class="f2 ml10 fs30">{{ pageData.conspicurity | meteoValue }}</text>
								<text class="fs26 f2">m</text>
							</view>
						</view>
					</view>
					<view class="r-panel">
						<view @click="turnToPapge('/pages/monitor/meteo-warn?index=1')" class="btn flex-cc fs24 btn1"
							>预警中心</view
						>
						<view @click="turnToPapge('/pages/monitor/monitor-control?type=rain')" class="btn flex-cc fs24 btn2"
							>水雨工情</view
						>
						<view @click="turnToPapge('', 'events', 'sjsb')" class="btn flex-cc fs24 btn3">应急事件</view>
						<!-- <view @click="turnToPapge('', 'overview')" class="btn flex-cc fs24 btn4">汛情总览</view> -->
					</view>
				</view>
			</view>

			<view class="img-bot-title fs22">{{ pageData.updateSite }}</view>

			<view class="alarmSignals-box">
				<view class="alarmSignals-sin" v-for="(i, index) in pageData.alarmSignals" :key="index">
					<image style="width: 80rpx" :src="i.iconUrl" mode="widthFix" />
				</view>
			</view>
		</view>
		<!-- 逐日预报 -->
		<view class="date-view-box">
			<view class="home-title">
				<text class="home-title-f1">逐日预报</text>
				<text class="home-title-f2">{{ dateUpdateTime }} 更新</text>
			</view>
			<scroll-view scroll-x class="home-data-box">
				<view class="home-date">
					<view class="date-ec" :style="{ width: dateList.length * 105 + 'rpx' }">
						<echart class="echarts" v-if="dateList.length > 0" :option="dateEcData"></echart>
					</view>
					<view
						@click="clickDate(item, index)"
						class="date-sin"
						v-for="(item, index) in dateList"
						:key="index"
						:class="{ classAc: index == dateIndexSelect }"
					>
						<view class="seven-top">
							<view class="flex-cc w100 mtb10" style="height: 20rpx">
								<u-icon name="arrow-down-fill" color="#0085FF" size="20" v-show="index == dateIndexSelect"></u-icon>
							</view>
							<text class="week fs28">{{ item.WEEK }}</text>
							<text class="date fs24 mt15">{{ item.date }}</text>

							<view class="iconUrl-box flex-cc mt20">
								<image :src="item.dayPath" mode="widthFix" class="mt10" style="width: 40rpx; max-height: 50rpx">
								</image>
							</view>
						</view>

						<view class="seven-bot">
							<view class="iconUrl-box flex-cc">
								<image :src="item.nightPath" mode="widthFix" class="mt10" style="width: 40rpx; max-height: 50rpx">
								</image>
							</view>
							<view class="flexD-cc mt35">
								<image
									class="wind-icon"
									src="../../static/image/home/week3.png"
									mode="widthFix"
									:style="{
										width: '33rpx',
										transform: `rotate(${item.WIND_DIR_CODE_NIGHT + 180}deg)`
									}"
								>
								</image>
								<text class="weatherDesc-wind fs26 mt20">{{ item.WIND_SPEED_DESC_NIGHT }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="home-data-bottom flex-vc">
				<view style="width: 50rpx; height: 50rpx; background: #57aeff; border-radius: 50%" class="flex-cc">
					<image :src="dateMsg.iconUrl" mode="widthFix" class="mt5" style="width: 30rpx; max-height: 50rpx" />
				</view>
				<text class="fs26"> {{ dateMsg.font }}</text>
			</view>
		</view>

		<view class="hour-view-box mt20" v-if="gird_hour.today.length > 0">
			<view class="home-title">
				<text class="home-title-f1">逐时预报</text>
				<text class="home-title-f2">{{ gird_hour.up_time }} 更新</text>
			</view>
			<u-empty text="暂无数据" mode="list" v-show="gird_hour.today.length == 0"></u-empty>
			<view class="home-hour" v-if="gird_hour.today.length > 0">
				<view class="l-hour">
					<view class="hour-list">
						<view style="height: 90rpx" class="flex-cc list-title">时次</view>
						<view style="height: 70rpx" class="mt3 flex-cc list-title">天气</view>
						<view style="height: 117rpx" class="mt3 flex-cc list-title">温度</view>

						<view style="height: 80rpx" class="mt3 flexD-cc list-title">
							<text>降水</text>
							<text>mm</text>
						</view>
						<view style="height: 80rpx" class="mt3 flexD-cc list-title"> <text>风向</text> </view>
						<view style="height: 80rpx" class="mt3 flexD-cc list-title"> <text>风速</text> <text>m/s</text> </view>
						<view style="height: 80rpx" class="mt3 flexD-cc list-title"> <text>极大风</text> <text>m/s</text> </view>
						<view style="height: 80rpx" class="mt3 flexD-cc list-title"> <text>湿度</text> <text>%</text> </view>
					</view>
				</view>
				<scroll-view class="r-hour" scroll-x @click.stop="">
					<view class="sv-ec-box" :style="{ width: gird_hour.today.length * 100 + 'rpx' }">
						<view class="hour-list">
							<view style="width: 100rpx" class="list-box" v-for="(i, index) in gird_hour.today" :key="index">
								<view style="height: 90rpx" class="flexD-cc">
									<view class="fs26"> {{ i.date_time }}日 </view>
									<text class="fs20">{{ i.time }}时</text>
								</view>
								<view style="height: 70rpx" class="flex-cc mt3">
									<view class="icon-box flex-cc">
										<image :src="i.dayPath" mode="widthFix" class="mt10" style="width: 32rpx; max-height: 50rpx" />
									</view>
								</view>
								<view style="height: 117rpx" class="mt3 flex-cc"></view>

								<view style="height: 80rpx" class="mt3 flex-cc"> {{ i.rainfall }} </view>
								<view style="height: 80rpx" class="mt3 flex-cc">
									<image
										src="../../static/image/home/week3.png"
										mode="widthFix"
										:style="{
											transform: `rotate(${i.rotate > 360 ? i.rotate - 360 : i.rotate + 180}deg)`,
											width: '28rpx',
											height: '28rpx'
										}"
									>
									</image>
								</view>
								<view style="height: 80rpx" class="mt3 flex-cc">
									{{ i.windspeed }}
								</view>
								<view style="height: 80rpx" class="mt3 flex-cc">
									{{ i.gustspeed }}
								</view>
								<view style="height: 80rpx" class="mt3 flex-cc">
									{{ i.rh }}
								</view>
							</view>
						</view>
						<view
							class="sv-ec-chart"
							:style="{ width: gird_hour.today.length * 100 + 'rpx' }"
							v-if="gird_hour.today.length > 0"
						>
							<echart class="echarts" :option="hourEcData"></echart>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="ec-box-list">
			<view class="btn-more-site flex-cc" @click="toMySite">我的关注点</view>
			<view class="rain-box mt20" v-for="item in followList.WPStationZQ.data" :key="item.siteNo">
				<ec-swen :nodeId="item.siteNo"></ec-swen>
			</view>

			<view class="rain-box mt20" v-for="item in followList.WPStationZZ.data" :key="item.siteNo">
				<ec-swei :nodeId="item.siteNo"></ec-swei>
			</view>

			<view class="rain-box mt20" v-for="item in followList.WPStationRR.data" :key="item.siteNo">
				<ec-sk :nodeId="item.siteNo"></ec-sk>
			</view>

			<view class="rain-box mt20" v-for="item in followList.WPStationPP.data" :key="item.siteNo">
				<ec-rain :nodeId="item.siteNo"></ec-rain>
			</view>
		</view>

		<view class="live-view-box mt20">
			<view class="home-title">
				<text class="home-title-f1">生活指数</text>
			</view>

			<view class="live-box">
				<view v-for="(i, index) in pageData.exponentForecasts" :key="index" class="live-box-sin">
					<image :src="i.iconUrl" mode="widthFix" style="width: 70rpx; max-height: 70rpx" />
					<view class="flexD-vc ml40">
						<view class="name">{{ i.title }}</view>
						<view class="value">{{ i.desc }}</view>
					</view>
				</view>
			</view>
		</view>

		<view style="width: 750rpx; height: 30rpx"> </view>
	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	import homeApi from '@/api/home.js'
	import { toFormData } from '@/utils/util'

	// getNearestSite
	import echart from '../../components/echart.vue'
	import { defaultPageData, dealTenData, dealHourData } from './home.js'
	import moment from 'moment'
	import fwSiteApi from '@/api/user/fwSite.js'
	// import { gcj02_To_gps84 } from '@/utils/changLatLon'
	import { debounce } from '@/utils/util'
	export default {
		components: {
			echart,
			'block-card': () => import('@/components/home/block-card.vue'),
			waterEc: () => import('@/components/home/waterEc.vue'),
			'ec-rain': () => import('@/components/home/ec-rain.vue'),
			'ec-swen': () => import('@/components/home/ec-swen.vue'),
			'ec-swei': () => import('@/components/home/ec-swei.vue'),
			'ec-sk': () => import('@/components/home/ec-sk.vue')
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				dateEcData: {},
				hourEcData: {},

				dateUpdateTime: moment().format('DD日HH时'),
				dateList: [],
				hourList: [],

				dateIndexSelect: 0,
				gird_hour: {
					up_time: '',
					today: []
				},
				dateMsg: {
					font: '',
					iconUrl: ''
				},

				forecastHour48: {
					imageUrls: [],
					rhList: [],
					windLevelList: [],
					windDirStrList: [],
					windDirList: [],
					temList: []
				},

				pageData: defaultPageData,
				siteData: {},

				followList: {
					WPStationZQ: {
						data: [{ siteNo: '70900601' }],
						text: '水文站'
					},
					WPStationRR: {
						data: [{ siteNo: '70900550' }],
						text: '水库站'
					},
					WPStationPP: {
						data: [{ siteNo: '70922216' }],
						text: '雨量站'
					},
					WPStationZZ: {
						data: [{ siteNo: '71010606' }],
						text: '水位站'
					}
				},

				localName: '',
				isMock: false
			}
		},
		watch: {},
		mounted() {
			this.getLatLon()
			uni.$on('updateHome', (data) => {
				this.initPage(data.data)
			})
			this.initEcList()
			uni.$on('updateEcList', (data) => {
				this.initEcList()
			})
		},
		beforeDestroy() {
			uni.$off('updateHome')
			uni.$off('updateEcList')
		},

		methods: {
			// 获取经纬度
			async getLatLon() {
				try {
					let res = await this.$getLocation()
					this.getNearSiteNoAndCode(res.longitude, res.latitude)
					// uni.getLocation({
					// 	type: 'gcj02',
					// 	success: async (res) => {
					// 		let latLon = gcj02_To_gps84(res.longitude, res.latitude)
					// 		console.info(`latLon:`, latLon)
					// 		// console.info(`wgs84:`, res)
					// 		// this.getNearSiteNoAndCode(118.190467, 26.170171)
					// 		// 获取最近的站点数据
					// 		this.getNearSiteNoAndCode(res.longitude, res.latitude)
					// 	}
					// })
				} catch (error) {
					// this.$hideLoading()
				}
			},
			// 获取最近站点
			async getNearSiteNoAndCode(lon, lat) {
				const resp = await homeApi.getNearestSite({
					longitude: lon,
					latitude: lat,
					areaCode: this.UserInfoData.dept.code
				})
				this.nearData = resp.data
				this.siteData = resp.data
				this.receiveData = resp.data

				// uni.showLoading({
				// 	title: '正在加载'
				// })
				uni.showLoading({
					title: '正在加载'
				})
				try {
					this.getBaseData(resp.data.siteNo)
					resp.data.gridId
					// this.getTenDaysData(this.siteData.countyName, this.siteData.townName)
					// this.getHourData(this.siteData.countyName, this.siteData.townName)
					this.getTenDaysData(this.siteData.countyName, this.siteData.townName, resp.data.gridId)
					this.getHourData(this.siteData.countyName, this.siteData.townName, resp.data.gridId)

					this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1', {
						key: 'XENBZ-NF4RU-LMIVC-G7CWJ-ZMMIK-KOFVN',
						location: `${lat},${lon}`,
						output: 'jsonp'
					})
						.then((res) => {
							if (res.status == 0) {
								let result = res.result
								this.nearData.address_component = result.address_component
								this.nearData.townTitle = result.address_reference.town.title
								let localName = ''
								if (result.address_component.city == '三明市') {
									this.isMock = false
									localName = result.address_component.district + '  ' + result.address_reference.town.title
								} else {
									this.isMock = true
									localName = this.siteData.countyName + '  ' + this.siteData.townName
								}
								this.nearData.localName = localName
								this.localName = localName
							}
							// this.form.evLocation = res.result.address
						})
						.catch((err) => {
							this.localName = this.siteData.countyName + '  ' + this.siteData.townName
						})
					this.$hideLoading()
				} catch (error) {
					console.error(error)
					this.$hideLoading()
				}

				this.$hideLoading()
				// homeApi.
			},
			// 获取网格id
			async getId(countyName, townName) {
				if (!this.idsList) {
					let { data } = await homeApi.getJson('/data/weather/getSfGridIds.json')
					this.idsList = data
				}

				if (countyName == '沙县区') {
					countyName = '沙县'
				}
				let item = this.idsList.find((item) => {
					return item.countyName == countyName && item.townName == townName
				})
				if (item) {
					return item.gridId
				} else {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '网格id不存在'
					// })
				}
			},
			async initPage(data) {
				try {
					uni.showLoading({
						title: '正在加载'
					})
					this.siteData.countyName = data.countyName
					this.siteData.townName = data.townName
					this.getBaseData(data.siteNo)
					this.getTenDaysData(this.siteData.countyName, this.siteData.townName, data.gridId)
					this.getHourData(this.siteData.countyName, this.siteData.townName, data.gridId)
					this.$hideLoading()
					this.receiveData = data
					if (data.localName) {
						this.localName = data.localName
						return
					}

					if (this.siteData.countyName == this.siteData.townName) {
						this.localName = this.siteData.townName
					} else {
						this.localName = this.siteData.countyName + '  ' + this.siteData.townName
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
				}

				// const resp = await homeApi.getSiteNoByTownCode({
				// 	townCode: data.id
				// })
				// this.getBaseData(resp.data)
			},

			async getBaseData(siteNo = 'F8426') {
				let url = `/data/weather/real/${siteNo}.json`
				const resp = await homeApi.getJson(url)
				this.pageData = resp.data
			},
			// 获取十天报
			async getTenDaysData(countyName, townName, gridId = '') {
				let grid = gridId
				if (!gridId) {
					grid = await this.getId(countyName, townName)
				}
				const post = toFormData({
					p: `{"h":{"p":"10001-sanming"},"b":{"weather_ten_grid_action":{"grid_id":"${grid}"}}}`
				})
				const resp = await indexApi.service(post)
				const { data } = resp
				const listArr = data.b.weather_ten_grid_action.list
				// 设置十天报
				const { list, option } = dealTenData(listArr) //.slice(0, 7)
				this.dateList = list
				this.dateEcData = option
				this.clickDate(list[0], 0)
			},
			// 获取逐小时
			async getHourData(countyName, townName, gridId = '') {
				let grid = gridId
				if (!gridId) {
					grid = await this.getId(countyName, townName)
				}
				const post = toFormData({
					p: `{"h":{"p":"10001-sanming"},"b":{"grid_forecast_new":{"grid_id":"${grid}"}}}`
				})
				const resp = await indexApi.service(post)
				const { data } = resp
				const grid_forecast_new = data.b.grid_forecast_new
				const { obj, option } = dealHourData(grid_forecast_new)
				this.gird_hour = obj
				this.hourEcData = option
			},

			clickDate(item, index) {
				this.dateIndexSelect = index
				this.dateMsg.iconUrl = `/data/icon/weather/day/${item.WEATHER_CODE_DAYTIME}.png`
				this.dateMsg.font = `${item.WEEK}：白天${item.WEATHER_DESC_DAYTIME}，夜间至凌晨${item.WEATHER_DESC_NIGHT}；气温${item.TEMPERATURE_HIGH}-${item.TEMPERATURE_LOW}℃。`
			},
			async initSiteEc() {},

			turnToCity() {
				let data = {
					nearData: this.nearData,
					receiveData: this.receiveData
				}
				uni.navigateTo({ url: '/pages/home/sitePage?data=' + encodeURIComponent(JSON.stringify(data)) })
			},
			turnToPapge(url, tab, current) {
				if (!url) {
					uni.$emit('changeTabbar', { pageCur: 'decision', tab: tab, current: current })
					return
				}
				uni.navigateTo({ url: url })
			},
			toMySite() {
				if (this.UserInfo) {
					uni.navigateTo({ url: '/pages/home/followSite' })
				} else {
					uni.navigateTo({ url: '/pages/user/login?data=' + '/pages/home/followSite' })
				}
			},
			initEcList: debounce(async function name(params) {
				let resp = await fwSiteApi.list({ userId: this.UserInfo.user_id })
				let list = resp.data.attentionSiteInfo
				if (list.length > 0) {
					Object.keys(this.followList).forEach((key) => {
						this.followList[key].data = []
					})
				}
				list.forEach((el) => {
					this.followList[el.siteType].data.push(el)
				})
			}, 500)
		},
		filters: {}
	}
</script>
<style lang="less" scoped>
	.app-box {
		padding-bottom: calc(55px + env(safe-area-inset-bottom) / 2);
	}
	.home-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: calc(55px + env(safe-area-inset-bottom) / 2);
		.home-imgbox {
			position: relative;
			width: 687rpx;
			height: 1032rpx;
			filter: drop-shadow(0rpx 16rpx 30rpx rgba(53, 82, 126, 0.48));
			border-radius: 30rpx;
			color: #fff;
			overflow: hidden;
			.alarmSignals-box {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				.alarmSignals-sin {
					margin-bottom: 10rpx;
				}
			}

			.location {
				position: absolute;
				// min-width: 196rpx;
				padding: 0 20rpx;
				height: 65rpx;
				left: 48rpx;
				top: 28rpx;
				background: rgba(0, 0, 0, 0.5);
				box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.25);
				backdrop-filter: blur(5rpx);
				/* Note: backdrop-filter has minimal browser support */

				border-radius: 30rpx;
				color: #ffffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}
			.img-bot {
				position: absolute;
				bottom: 50rpx;
				width: 648rpx;
				// height: 273rpx;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(0, 0, 0, 0.25);
				backdrop-filter: blur(5rpx);
				/* Note: backdrop-filter has minimal browser support */
				border-radius: 30rpx;
				.bot-title {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					align-items: center;
					.left-title {
						font-size: 20rpx;
						padding: 6rpx 15rpx;
						background: #000000;
						text-align: center;
						border: 1rpx solid rgba(255, 255, 255, 0.31);
						backdrop-filter: blur(5rpx);
						/* Note: backdrop-filter has minimal browser support */

						border-radius: 30rpx;
					}
					.right-icon {
						width: 37rpx;
						height: 37rpx;
						background: #00a3ff;
						backdrop-filter: blur(5rpx);
						/* Note: backdrop-filter has minimal browser support */
						border-radius: 30rpx;
					}
				}
				.bot-panel {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 20rpx;
					.l-panel {
						width: 414rpx;
						.l-item-box {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							.item-sin {
								// width: 50%;
								white-space: nowrap;
								f .f1 {
									font-size: 30rpx;
								}
								.f2 {
									color: #00b2ff;
									font-weight: bold;
								}
							}
						}
					}
					.r-panel {
						.btn {
							width: 160rpx;
							height: 43rpx;
							border-radius: 50rpx;
							margin: 7rpx 0;
						}
						.btn1 {
							background: rgba(0, 178, 255, 0.24);
							box-shadow: inset 0rpx 0rpx 30rpx #00d1ff;
						}
						.btn2 {
							background: rgba(0, 25, 255, 0.47);
							box-shadow: inset 0rpx 0rpx 30rpx #808cff;
						}
						.btn3 {
							background: rgba(255, 199, 0, 0.37);
							box-shadow: inset 0rpx 0rpx 30rpx #ffc700;
						}
						.btn4 {
							background: rgba(142, 89, 255, 0.44);
							box-shadow: inset 0rpx 0rpx 30rpx #bc9cff;
						}
					}
				}
			}

			.img-bot-title {
				position: absolute;
				bottom: 10rpx;
				left: 50%;
				transform: translateX(-50%);
				white-space: nowrap;
			}
		}
	}
	.home-title {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin: 15rpx 0 25rpx 0;
		.home-title-f1 {
			font-style: normal;
			font-weight: 600;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			color: #525252;
		}
		.home-title-f2 {
			font-style: normal;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			color: #9d9d9d;

			opacity: 0.8;
		}
		.btn-more {
			width: 105rpx;
			height: 40rpx;
			background: #eaf2ff;
			border: 1rpx solid #0085ff;
			border-radius: 39rpx;
			padding: 10rpx 20rpx;
			color: #0085ff;
			font-size: 22rpx;
			font-weight: 600;
		}
	}

	.date-view-box {
		background: #fff;
		display: flex;
		width: 750rpx;
		padding: 20rpx;
		padding-top: 110rpx;
		flex-direction: column;
		align-items: center;
		transform: translateY();

		.home-data-box {
			width: 730rpx;
			background: linear-gradient(180deg, rgba(203, 224, 255, 0.29) 0%, #cbe0ff 100%);
		}
		.home-date {
			// width: 730rpx;
			// height: 570rpx;
			// padding-top: 12rpx;

			display: flex;
			position: relative;
			padding-bottom: 0;
			.classAc {
				border: 0.5rpx solid rgba(0, 133, 255, 0.5) !important;
				// background: linear-gradient(180deg, #f9fbff 0%, #f0f6ff 100%);
				box-shadow: inset 0rpx 13rpx 50rpx rgba(0, 133, 255, 0.24);
			}
			.date-sin:nth-child(2n) {
				// background: rgba(165, 192, 255, 0.11);
			}
			.date-ec {
				position: absolute;
				// width: 100%;
				top: 215rpx;
				height: 190rpx;

				// border: 0.5rpx solid red;
			}

			.date-sin {
				border: 0.5rpx solid transparent;

				// flex: 1;
				min-width: 105rpx;
				max-width: 105rpx;
				height: 630rpx;

				// border: 1px solid red;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				// padding-top: 12rpx;
				padding-bottom: 20rpx;
				.seven-top {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					min-height: 190rpx;

					.week {
						color: #000000;
					}

					.date {
						// color: rgba(255, 255, 255, 0.81);
						color: #878787;
					}
					.iconUrl-box {
						box-shadow: inset 0rpx 13rpx 50rpx rgba(0, 133, 255, 0.24);
						width: 64rpx;
						height: 64rpx;
						background: #57aeff;
						border-radius: 50%;
					}
				}

				.seven-bot {
					width: 71rpx;
					// height: 210rpx;
					border-radius: 50rpx;
					// height: 30%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;

					.date-top {
						display: flex;
						background: #fff;
						width: 100%;
						color: #000;
						height: 50%;
						padding-top: 8rpx;
					}
					.date-night {
						width: 100%;
						padding-bottom: 8rpx;
						height: 50%;
						color: #fff;
						background: rgba(53, 82, 126, 0.64);
					}

					.date {
						color: rgba(255, 255, 255, 0.81);
					}
					.iconUrl-box {
						width: 64rpx;
						height: 64rpx;
						background: #607589;
						border-radius: 50%;
					}
				}
				.weatherDesc-wind {
					color: #000;
				}
				.wind-icon {
				}
			}
		}
		.home-data-bottom {
			width: 689rpx;
			// height: 50rpx;
			background: #eaf2ff;
			border-radius: 39rpx;
			margin-top: 30rpx;
			text-indent: 16rpx;
			padding: 5rpx 10rpx;
		}
	}

	.hour-view-box {
		background: #fff;
		display: flex;
		width: 750rpx;
		padding: 20rpx;
		flex-direction: column;
		align-items: center;
		.home-hour {
			// height: 640rpx;
			width: 720rpx;
			display: flex;
			border-radius: 11rpx;
			overflow: hidden;
			.l-hour {
				width: 115rpx;
				margin-right: 5rpx;
				height: 100%;
				// background: linear-gradient(180deg, rgba(164, 179, 201, 0.17) 0%, rgba(159, 172, 191, 0.66) 100%);
				.hour-list {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					white-space: nowrap;
					font-size: 26rpx;
					height: 100%;
					justify-content: space-between;
				}
				.list-title {
					font-size: 26rpx;
					width: 100%;
					background: rgba(87, 155, 255, 0.2);
					color: #0085ff;
				}
				.list-box-top,
				.list-box-bot {
					width: 100%;
				}
			}
			.r-hour {
				width: 600rpx;
				height: 100%;
				.sv-ec-box {
					// width: 48 * 100rpx;
					// min-width: 48 * 100rpx;
					// max-width: 48 * 100rpx;

					height: 100%;
					position: relative;
					.hour-list {
						display: flex;
						align-items: center;
						white-space: nowrap;
						font-size: 26rpx;
						height: 100%;
						background: rgba(203, 224, 255, 0.3);
						.list-box {
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							border-right: 0.5rpx solid rgba(0, 0, 0, 0.071);

							.list-box-top {
								height: 100rpx;
								display: flex;
								flex-direction: column;
							}
							.list-box-bot {
								display: flex;
								flex-direction: column;
								align-items: center;
							}
						}
						.flex-cc {
						}
						.icon-box {
							background: #0085ff;
							width: 53rpx;
							height: 53rpx;
							border-radius: 50%;
						}
					}

					.sv-ec-chart {
						position: absolute;
						top: 170rpx;
						// border: 1rpx solid red;
						// transform: translateY(-10rpx);
						// width: 48 * 100rpx;
						// min-width: 48 * 100rpx;
						// max-width: 48 * 100rpx;
						height: 117rpx;
						pointer-events: none;
					}
				}
			}
		}
	}
	.live-view-box {
		background: #fff;
		display: flex;
		width: 750rpx;
		padding: 20rpx;
		flex-direction: column;
		align-items: center;
		.live-box {
			width: 700rpx;
			height: 393rpx;
			background: linear-gradient(180deg, rgba(255, 248, 221, 0) 0%, rgba(221, 249, 255, 0) 0.01%, #e2f0ff 100%);
			box-shadow: inset 0rpx -9rpx 50rpx rgba(0, 56, 255, 0.06);
			border-radius: 10rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.live-box-sin {
				width: 50%;
				display: flex;
				padding-left: 40rpx;
				.name {
					color: #525252;
					font-weight: 550;
				}
				.value {
					color: #4b93ff;
					font-weight: 550;
				}
			}
		}
	}
	.self-site {
		margin: 30rpx 0;
		width: 691rpx;
		height: 58rpx;
		background: #eaf2ff;
		border-radius: 10rpx;
		.btn-more {
			// width: 105rpx;
			height: 40rpx;
			background: #eaf2ff;
			border: 1rpx solid #0085ff;
			border-radius: 39rpx;
			padding: 10rpx 20rpx;
			color: #0085ff;
			font-size: 22rpx;
			font-weight: 600;
		}
	}

	.self-site-list {
		width: 720rpx;
		display: flex;
		justify-content: space-between;
	}

	.self-site-ec {
		width: 720rpx;
		height: 570rpx;
		display: flex;
		justify-content: space-between;
	}

	.ec-box-list {
		position: relative;
		margin-top: 20rpx;
		width: 750rpx;

		.rain-box {
			width: 100%;
			padding: 0 15rpx 15rpx 15rpx;

			background: #fff;
		}
		.btn-more-site {
			position: absolute;
			top: 37rpx;
			right: 17rpx;
			z-index: 999;
			width: fit-content;
			background: #eaf2ff;
			border: 1rpx solid #0085ff;
			border-radius: 39rpx;
			padding: 10rpx 20rpx;
			color: #0085ff;
			font-size: 22rpx;
			font-weight: 600;
		}
	}
</style>
